<template>
  <div class="h111">
    <van-tabs v-model:active="active">
      <van-tab title="我的关注">内容 1</van-tab>
      <van-tab title="推荐">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div v-for="(item, index) in list" :key="index" class="div">
            <div class="left">
              <img :src="item.img" alt="" />
            </div>
            <div class="right" style="margin-left: 10px">
              <b>{{ item.title }}</b>
              <p style="font-size: 10">{{ item.ly }}网 2024-10-21{{ item.time }}</p>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// 引入mock
import Mock from 'mockjs'

// 默认显示第几个tab
const active = ref(1)
// 模拟数据
const data = Mock.mock({
  'list|15': [
    {
      id: '@id',
      title: '@ctitle(12,25)',
      img: '@image(80x80,@color)',
      desc: '@ctitle(12,25)',
      time: '@time("HH:mm:ss")',
      // 来源
      ly: '@ctitle(2,5)',
      // 其实没用到单价
      price: '@float(0,100,2,2)'
    }
  ]
})
// 加载中状态
const loading = ref(false)
// 是否加载完成
const finished = ref(false)
// 使用接口声明类型
interface ListState {
  id?: string
  title?: string
  desc?: string
  price?: number
  img?: string
  time?: string
  ly?: string
}
// 要渲染的数据
const list:ListState[] = ref([])
// 赋值
list.value = data.list
// 加载更多数据
const onLoad = () => {
  // 异步更新数据
  setTimeout(() => {
    console.log(list.value)

    for (let i = 0; i < 3; i++) {
      list.value.push(data.list[i])
    }
    // 加载状态结束
    loading.value = false
    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true
    }
  }, 1000)
}
</script>
<style lang="scss" scoped>
.van-tabs {
  width: 100%;
  height: 100%;
  .div {
    width: 100%;
    height: 80px;
    display: flex;
    margin: 10px 0;
  }
}
</style>
